<script lang="ts" setup>
import GameModeule from "@/components/HYHome/gameModule.vue";
import { ref } from "vue";
const emits = defineEmits(["openOperatorsList", "openGameUrl", "openGamePageList"]);
const openOperatorsList = index => {
  console.log("是什么东西", gameLogoArr.value.list[index]);
  emits("openOperatorsList", gameLogoArr.value.list[index]);
};
const openGamePageList = e => {
  emits("openGamePageList", e);
};
const RefGameModeule = ref();
const gameLogoArr: any = ref({ list: [] });
const selectIndex = ref(0);
const selectGame = _index => {
  selectIndex.value = _index;
};
const openGameUrl = e => {
  emits("openGameUrl", e);
};
const getGameData = e => {
  gameLogoArr.value.list = e;
};
const refreshGameList = () => {
  // RefGameModeule.value.getGroupClusters();
  RefGameModeule.value.refreshCollectionType();
};

defineExpose({ refreshGameList });
</script>
<template>
  <div class="game-frame">
    <div class="supplier-frame df">
      <div v-for="(item, index) in gameLogoArr.list" :key="index">
        <div class="supplier-list">
          <div class="supplie-frame ai-center df">
            <div class="supplie-content df ai-flex-end" @click="selectGame(index)">
              <div v-show="index == 0 || selectIndex == index" class="select-type"></div>
              <img class="supplie-img" :src="item.customLogo" @click="openOperatorsList(index)" />
            </div>
            <div class="segment"></div>
          </div>
        </div>
      </div>
    </div>
    <GameModeule
      ref="RefGameModeule"
      :gameLogoArr="gameLogoArr.list"
      @open-game-url="openGameUrl"
      @getGameData="getGameData"
      @openGamePageList="openGamePageList"
    />
  </div>
</template>
<style lang="less" scoped>
.game-frame {
  width: 100%;
  height: auto;
  //overflow-y:auto;
}
.supplier-frame {
  width: calc(100% - 60px);
  height: 76.5px;
  margin-top: 24px;
  padding-left: 27px;
  overflow: auto;
  margin-bottom: 40px;

  .supplier-list {
    width: auto;
    height: 56.5px;
    position: relative;
    left: 0;
    top: 0;
    margin-right: 40px;

    .supplie-frame {
      width: auto;
      height: 70px;
    }

    .select-type {
      width: 100%;
      height: 8px;
      background-image: linear-gradient(87deg, #fe7919 0%, #ab3fe7 100%);
      border-radius: 7px;
      position: absolute;
      top: 0;
      left: -4px;
      z-index: 5;
    }

    .supplie-img {
      width: auto;
      height: 66px;
      margin-bottom: -6px;
      margin-top: 10px;
    }

    .segment {
      width: 1px;
      height: 32.8281px;
      background-color: rgba(255, 255, 255, 0.15);
      margin-left: 20px;
      margin-top: 16px;
      position: absolute;
      right: -20px;
      top: 7px;
      z-index: 3;
    }

    .supplie-content {
      width: auto;
      position: relative;
      top: 0;
      left: 0;
      margin-right: 10px;
    }
  }
}
.supplier-frame::-webkit-scrollbar {
  display: none;
}
</style>
